/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    SafeAreaView,
    TouchableOpacity,
    ImageBackground,
    Dimensions,
    FlatList
} from 'react-native';
// import {observer} from 'mobx-react';
import ImageTextWithArrowView from "./ImageTextWithArrowView";
import DividerLineH from "./DividerLineH";
import NavigationBar from "teaset/components/NavigationBar/NavigationBar";

let screenW = Dimensions.get('window').width;
type Props = {};
export default class ProductScreen extends Component<Props> {

    constructor(props) {
        super(props);

        this.state = {
            value: 1
        }
    }

    // static navigationOptions = ({navigation}) => {
    //     return {
    //         header: (
    //             <NavigationBar
    //                 titleItemTextStyle={{color: colors.titleColor}}
    //                 navigation={navigation}
    //                 backgroundColor={colors.whiteColor}
    //                 navigationTitleItem={''}
    //                 statusBarStyle={'dark-content'}
    //                 themeStyle={'default'}
    //             />
    //         )
    //     };
    // };


    componentDidMount() {

    }

    // renderCard = () =>{
    //     <ImageBackground style={{backgroundColor:'f5f5f5'}} padding: 15>
    //
    //     </ImageBackground>
    // }
    //收货列表

    renderHeaderImage = () => {
        return (
            <ImageBackground style={{alignItems: 'center', width: 240, height: 100}}>
                <Text style={{color: '#ffffff'}}>add</Text>
                <Image style={{width: 40, height:40}}/>
            </ImageBackground>
        );
    }

    renderEdit = () =>{
        return(
            <View style={{alignItems:'center'}}>
                <Text style={{fontSize:14, color:'#333'}}>惊声尖叫</Text>


            </View>
        );
    }
    renderItem = () =>{
        return(
            <View style={{width:screenW}}>
                <ImageTextWithArrowView textName={'绑定手机'}/>
                <DividerLineH/>
                <ImageTextWithArrowView textName={'修改密码'}/>
            </View>
        );
    }

    renderBottom = () =>{
        return(
            <View style={{width:screenW}}>
                <View style={{ alignItems:'center'}}>
                    <Text>total</Text>
                    <Text>total</Text>
                    <Text>total</Text>
                </View>
                <TouchableOpacity>
                    <View style={{alignItems:'center', justifyContent: 'center', backgroundColor: 'red'}}>
                        <Text>rightNow</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }


    render() {

        return (
            <View style={styles.container}>
                {this.renderList()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

